<template>
  <el-tabs v-model="activeName" type="card" class="bColorT">
    <el-tab-pane v-for="(tab,index) in tabs" :key="index" :label="tab.label" :name="tab.name">
      <component :is="tab.name" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { Design, Report, Essay, Material } from './list';

export default {
  name: 'Index',
  components: {
    Design,
    Report,
    Essay,
    Material
  },
  data () {
    return {
      activeName: '',
      tabs: [
        {
          label: '教学设计',
          name: 'Design'
        },
        {
          label: '教研报告',
          name: 'Report'
        },
        // {
        //   label: '文章',
        //   name: 'Essay'
        // },
        {
          label: '平台素材库',
          name: 'Material'
        }
      ]
    };
  },
  created () {
    console.log(' this.$route.query:', this.$route.query);
    this.activeName = this.$route.query && this.$route.query.tabsName ? this.$route.query.tabsName : this.tabs[0].name;
  }
};
</script>

<style lang="scss" scoped>
</style>
